<template>
  <el-form label-width="144px" class="ccui-form">
    <el-row :gutter="10">
      <el-col :span="12">
        <el-form-item label="填报单位：" class="contractName">
          <span>{{ formData.reportInOrgName }}</span>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="收款人：">
          <span>{{ formData.payee }}</span>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row :gutter="10">
      <el-col :span="12">
        <el-form-item label="付款申请单编号：">
          <span>{{ formData.paymentCode }}</span>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="付款申请单名称：">
          <span>{{ formData.paymentName }}</span>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row :gutter="10">
      <el-col :span="12">
        <el-form-item label="付款登记编号：">
          <span>{{ formData.registerCode }}</span>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="合同编号：">
          <span>{{ formData.contractCode }}</span>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row :gutter="10">
      <el-col :span="12">
        <el-form-item label="合同名称：">
          <span>{{ formData.contractName }}</span>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="合同含税金额：">
          <span>{{
            moneyTwoFixed(formData.initTotalContractPriceIncludeTax)
          }}</span>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row :gutter="10">
      <el-col :span="12">
        <el-form-item label="币种：">
          <span>{{ formData.currencyName }}</span>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="兑人民币汇率：">
          <span>{{ formData.chExchangeRate }}</span>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row :gutter="10">
      <el-col :span="12">
        <el-form-item label="已到票金额：">
          <span>{{ moneyTwoFixed(formData.invoiceIncludeTax) }}</span>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="已结算金额：">
          <span>{{ moneyTwoFixed(formData.settledPrice) }}</span>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row :gutter="10">
      <el-col :span="12">
        <el-form-item label="申请付款金额：">
          <span>{{ moneyTwoFixed(formData.paymentMoney) }}</span>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="付款类型：">
          <span>{{ paymentTypelist(formData.paymentType) }}</span>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row :gutter="10">
      <el-col :span="12">
        <el-form-item label="付款方式：">
          <span>{{ paymentModelist(formData.paymentMode) }}</span>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="票据月数：" v-show="isShowBillMonths">
          <span>{{ formData.billMonths }}</span>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row :gutter="10">
      <el-col :span="12">
        <el-form-item label="登记付款金额：">
          <span>{{
            formData.registerPrice
              ? Number(formData.registerPrice).toFixed(2)
              : ""
          }}</span>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="付款日期：">
          <span>{{ formData.registerTime }}</span>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row :gutter="10">
      <el-col :span="12">
        <el-form-item label="编制日期：">
          <span>{{ formData.reportTime }}</span>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="编制人：">
          <span>{{ formData.reportUsername }}</span>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row :gutter="10">
      <el-col :span="18">
        <el-form-item label="请款事由(摘要)：">
          <span class="colSpan">{{ formData.reasons }}</span>
        </el-form-item>
      </el-col>
    </el-row>

    <el-row :gutter="10">
      <el-col :span="18">
        <el-form-item label="备注：">
          <span class="colSpan">{{ formData.remark }}</span>
        </el-form-item>
      </el-col>
    </el-row>
  </el-form>
</template>

<script>
export default {
  props: ["formData"],
  computed: {
    // 月票据显示
    isShowBillMonths() {
      return this.formData.paymentMode !== 4 && this.formData.paymentMode;
    },
  },
  methods: {
    // 金额保留两位小数
    moneyTwoFixed(money) {
      return money ? Number(money).toFixed(2) : "0.00";
    },
    // 付款类型 1-预付、2-应付
    paymentTypelist(num) {
      switch (num) {
        case 1:
          return "预付";
        case 2:
          return "应付";
      }
    },
    // 付款方式 1-银行承兑、2-商业承兑、3-供应链金融、4-现金
    paymentModelist(num) {
      switch (num) {
        case 1:
          return "银行承兑";
        case 2:
          return "商业承兑";
        case 3:
          return "供应链金融";
        case 4:
          return "现金";
        default:
          return num;
      }
    },
  },
};
</script>
<style scoped lang="scss">
.afterCurSettlePayAmtIncludeTax {
  position: absolute;
  top: -25px;
  left: 15px;
  color: #d8d8d8;
}
/deep/ .el-input {
  width: 260px;
}

/deep/ .el-button--single-number {
  width: 46px;
  margin-left: 10px;
  padding: 0 9px;
}
/deep/.ccui-pre-form-item {
  .el-form-item__label {
    line-height: 16px;
  }
}
.colSpan {
  display: block;
  width: 100%;
  word-wrap: break-word;
  white-space: normal;
  word-break: break-all;
}
</style>
